<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="__PLUGINS__webuploader/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="__ADMINLTE__plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="__PLUGINS__webuploader/webuploader.html5only.min.js"></script>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist1" class="uploader-list"></div>
    <div class="btns">
        <div class="picker" id="picker1">选择文件</div>
    </div>
</div>
<div id="uploader" class="wu-example" name="photo[]">
    <!--用来存放文件信息-->
    <div id="thelist2" class="uploader-list"></div>
    <div class="btns">
        <div class="picker" id="picker2">图片上传</div>
    </div>
</div>
<script>
jQuery.fn.createUpload=function () {
    this.each(function() {
        var $list = $(this).find('.uploader-list'),
            pick  = '#'+$(this).find('.picker').attr('id'),
            name  = $(this).attr('name');
        var uploader = new WebUploader.Uploader({
            server: '{:U('AjaxUploads/uploads')}',
            pick: pick,
            // 其他配置项
            auto: true,
        });
        uploader.onFileQueued = function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
            '</div>' );
        };
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            console.log(file.name);
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file, json ) {
                $( '#'+file.id ).html('<input type="hidden" name="'+name+'" value="'+json.savename+'">'+
                    '<image style="width:100px;height:100px" src="'+json.savepath+json.savename+'" />');
            alert(json._raw);
        })

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

    });
};
$(function() {
    $('.wu-example').createUpload();
});
</script>
